<script>
import { OPEN_PLATFORM, PLATFORM_COLOR } from '@/enum/goods.js'
export default {
  name: 'ClassifyTableItem',
  components: {},
  props: {
    // 分类信息
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    /**
     * 生成行数据
     * @{isOne} {boolean} 是否为一级数据
     * @{data} {object} 数据信息
     */
    creatRow(isOne, isTwo, data) {
      // console.log('data', data)
      return (
        <el-row class="pt-20">
          <el-col class="ft-14" span={2} align="center">
            {isOne ? data.name : ''}
          </el-col>
          <el-col span={2} align="center" offset={isOne ? 0 : 2}>
            {isOne ? (
              <div>
                {data.childList.length ? (
                  <div
                    class="flex align-center justify-center text-cursor"
                    onClick={() => this.changeShowChild(data.id)}
                  >
                    <el-link underline={false} style="color: #409eff">
                      {data.showChild ? '收起' : '展开'}
                    </el-link>
                    <i
                      class={data.showChild ? 'el-icon-arrow-up' : 'el-icon-arrow-down'}
                      style="color: #409eff"
                    ></i>
                  </div>
                ) : (
                  <span class="ft-14">暂无子级</span>
                )}
              </div>
            ) : isTwo ? (
              <div>
                <el-image
                  style="width: 100px; height: 100px;"
                  src={data.icon}
                  preview-src-list={[data.icon]}
                ></el-image>
                <p>{data.name}</p>
              </div>
            ) : (
              ''
            )}
          </el-col>
          <el-col span={2} align="center" offset={isTwo ? 0 : 4}>
            {!isOne ? (
              isTwo ? (
                <div>
                  {data.childList.length ? (
                    <div
                      class="flex align-center justify-center text-cursor"
                      onClick={() => this.changeShowTwoChild(data.id, data.parentId)}
                    >
                      <el-link underline={false} style="color: #409eff">
                        {data.showChild ? '收起' : '展开'}
                      </el-link>
                      <i
                        class={data.showChild ? 'el-icon-arrow-up' : 'el-icon-arrow-down'}
                        style="color: #409eff"
                      ></i>
                    </div>
                  ) : (
                    <span class="ft-14">暂无子级</span>
                  )}
                </div>
              ) : (
                <div>
                  <el-image
                    style="width: 100px; height: 100px;"
                    src={data.icon}
                    preview-src-list={[data.icon]}
                  ></el-image>
                  <p>{data.name}</p>
                </div>
              )
            ) : (
              <span class="ft-14"></span>
            )}
          </el-col>
          <el-col span={2} align="center" offset={isOne ? 2 : 0}>
            {data.goodsNum}
          </el-col>
          <el-col span={1} align="center">
            {data.sort}
          </el-col>
          <el-col span={2} align="center">
            {data.isRecommend ? (
              <p class="mb-5 ft-14" style="color:#409eff">
                推荐中
              </p>
            ) : (
              ''
            )}
            <el-link
              type={data.isRecommend ? '' : 'primary'}
              underline={false}
              onClick={() => this.changeIsRecommend(data)}
            >
              {data.isRecommend ? '取消推荐' : '推荐'}
            </el-link>
          </el-col>
          <el-col span={2} align="center">
            {data.zoneDayNew ? (
              <p class="mb-5 ft-14" style="color:#409eff">
                推荐中
              </p>
            ) : (
              ''
            )}
            <el-link
              type={data.zoneDayNew ? '' : 'primary'}
              underline={false}
              onClick={() => this.changeZoneDayNew(data)}
            >
              {data.zoneDayNew ? '取消推荐' : '推荐'}
            </el-link>
          </el-col>
          <el-col span={2} align="center">
            {data.zoneSeasonal ? (
              <p class="mb-5 ft-14" style="color:#409eff">
                推荐中
              </p>
            ) : (
              ''
            )}
            <el-link
              type={data.zoneSeasonal ? '' : 'primary'}
              underline={false}
              onClick={() => this.changeZoneSeasonal(data)}
            >
              {data.zoneSeasonal ? '取消推荐' : '推荐'}
            </el-link>
          </el-col>
          <el-col span={2} align="center">
            {data.zoneBrand ? (
              <p class="mb-5 ft-14" style="color:#409eff">
                推荐中
              </p>
            ) : (
              ''
            )}
            <el-link
              type={data.zoneBrand ? '' : 'primary'}
              underline={false}
              onClick={() => this.changeZoneBrand(data)}
            >
              {data.zoneBrand ? '取消推荐' : '推荐'}
            </el-link>
          </el-col>
          <el-col span={2} align="center">
            {data.zoneFineGoods ? (
              <p class="mb-5 ft-14" style="color:#409eff">
                推荐中
              </p>
            ) : (
              ''
            )}
            <el-link
              type={data.zoneFineGoods ? '' : 'primary'}
              underline={false}
              onClick={() => this.changeZoneFineGoods(data)}
            >
              {data.zoneFineGoods ? '取消推荐' : '推荐'}
            </el-link>
          </el-col>
          <el-col span={2} align="center">
            <div class="flex flex-col">
              {Object.keys(OPEN_PLATFORM).map(el => (
                <el-tag size="small" color={PLATFORM_COLOR[el]} style="color:#fff">
                  {OPEN_PLATFORM[el]}
                </el-tag>
              ))}
            </div>
          </el-col>
          <el-col span={1} align="center" class="flex flex-col align-center">
            {Object.keys(OPEN_PLATFORM).map(el => (
              <el-switch
                value={data.platform.includes(el)}
                active-text=""
                inactive-text=""
                active-color={PLATFORM_COLOR[el]}
                inactive-color="#9b9b9f"
                v-on:change={() => this.changeOpenStatus(data, el)}
              ></el-switch>
            ))}
          </el-col>
          <el-col span={2} align="center">
            <el-link type="primary" class="mr-5" onClick={() => this.edit(data)}>
              编辑
            </el-link>
            {data.openStatus ? (
              ''
            ) : (
              <pop-confirm confirm={() => this.deleteClassify(data)}>
                <el-link type="info">删除</el-link>
              </pop-confirm>
            )}
          </el-col>
        </el-row>
      )
    },

    // 切换展示隐藏
    changeShowChild(id) {
      this.$emit('changeShowChild', id)
    },

    changeShowTwoChild(id) {
      this.$emit('changeShowTwoChild', id)
    },

    // 切换平台显示隐藏
    changeOpenStatus(data, value) {
      this.$emit('changeOpenStatus', data, value)
    },

    // 切换推荐状态
    changeIsRecommend(data) {
      this.$emit('changeIsRecommend', data, 'IsRecommend')
    },
    changeZoneDayNew(data) {
      this.$emit('changeIsRecommend', data, 'ZoneDayNew')
    },
    changeZoneSeasonal(data) {
      this.$emit('changeIsRecommend', data, 'ZoneSeasonal')
    },
    changeZoneBrand(data) {
      this.$emit('changeIsRecommend', data, 'ZoneBrand')
    },
    changeZoneFineGoods(data) {
      this.$emit('changeIsRecommend', data, 'ZoneFineGoods')
    },

    // 点击编辑
    edit(data) {
      this.$emit('editClassify', data)
    },

    // 点击删除分类
    deleteClassify(data) {
      this.$emit('deleteClassify', data)
    }
  },
  render() {
    const children = this.info.childList.map(el => {
      const twoChildren = el.childList.map(item => this.creatRow(false, false, item))
      return (
        <div>
          {this.creatRow(false, true, el)}
          {el.showChild ? twoChildren : ''}
        </div>
      )
    })
    // const children = this.info.childList.map(el => this.creatRow(false, true, el))
    return (
      <div class="pb-10" style="height:auto;border-bottom:1px solid #eee">
        {this.creatRow(true, false, this.info)}
        {this.info.showChild ? children : ''}
      </div>
    )
  }
}
</script>
